<!--
 * @Description: 
 * @Version: 1.0
 * @Author: wenbin
 * @Date: 2021-08-06 16:41:52
 * @LastEditors: wenbin
 * @LastEditTime: 2021-08-19 11:59:31
 * @FilePath: /magus-plugin/examples/views/test/addVersion.vue
 * Copyright (C) 2021 wenbin. All rights reserved.
-->
<template>
  <magus-add-template class="addVersion-box" title="新增版本">
    <template slot="main">
      <el-form
        :model="addVersionData"
        size="mini"
        :rules="addVersionRules"
        ref="addVersionData"
        label-width="100px"
      >
        <!-- 选择平台 -->
        <el-form-item label="所属平台" prop="platform">
          <el-select
            size="mini"
            v-model="addVersionData.platform"
            placeholder="所属平台"
          >
            <el-option
              v-for="item in platList"
              :key="item.id"
              :label="item.platformName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 版本类型 -->
        <el-form-item label="版本类型">
          <el-checkbox :value="true" disabled>beta版</el-checkbox>
        </el-form-item>
        <!-- 更新说明 -->
        <!-- <el-form-item :label="$t('appstore.update_remark')">
          <el-input
            v-model="addVersionData.remark"
            type="textarea"
            size="mini"
            :placeholder="$t('appstore.update_remark')"
            :rows="4"
            resize="none"
          >
          </el-input>
        </el-form-item> -->
        <!-- 上传方式 -->
        <el-form-item label="上传方式">
          <el-select
            size="mini"
            v-model="addVersionData.uploadMethod"
            placeholder="上传方式"
          >
            <el-option
              v-for="item in uploadType"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- csv 文件 -->
        <el-form-item
          v-show="addVersionData.uploadMethod === 'single'"
          label="csv文件"
        >
          <div class="uploadfile">
            <input
              class="uploadfile-input"
              type="file"
              ref="csvFile"
              @change="uploadFile('csvFile', 'csvBtn', $event)"
              accept=".csv"
            />
            <el-button style="width: 100%;" type="primary" size="mini">{{
              fileData.csvBtn
            }}</el-button>
          </div>
        </el-form-item>
        <!-- 应用 文件 -->
        <el-form-item
          v-show="
            addVersionData.uploadMethod === 'single' &&
              ($route.params.type !== 'CENTER_APP' ||
                $route.params.type !== 'OTHER_APP')
          "
          label="app文件"
        >
          <div class="uploadfile">
            <input
              class="uploadfile-input"
              type="file"
              ref="appFile"
              @change="uploadFile('appFile', 'appBtn', $event)"
            />
            <el-button style="width: 100%;" type="primary" size="mini">{{
              fileData.appBtn
            }}</el-button>
          </div>
        </el-form-item>
        <!-- 文件包 -->
        <el-form-item
          v-show="addVersionData.uploadMethod === 'multiple'"
          label="zip文件"
        >
          <div class="uploadfile">
            <input
              class="uploadfile-input"
              type="file"
              ref="zipFile"
              @change="uploadFile('zipFile', 'zipBtn', $event)"
            />
            <el-button style="width: 100%;" type="primary" size="mini">{{
              fileData.zipBtn
            }}</el-button>
          </div>
        </el-form-item>
      </el-form>
    </template>
    <template slot="footer">
      <el-button @click="$router.back()" size="mini">取消</el-button>
      <el-button
        size="mini"
        :loading="loading"
        @click="createAppVersion"
        type="primary"
        >保存</el-button
      >
    </template>
  </magus-add-template>
</template>

<script>
import appManageApi from "@examples/api/appManage";
export default {
  name: "addVersion",
  components: {},
  data() {
    return {
      addVersionData: {
        platform: "",
        remark: "",
        uploadMethod: "single",
      },
      loading: false,
      platList: [],
      fileData: {
        csvFile: "",
        csvBtn: "选择csv文件",
        appFile: "",
        appBtn: "选择上传文件",
        zipFile: "",
        zipBtn: "选择zip文件",
      },
      uploadType: [
        {
          name: "单个上传",
          value: "single",
        },
        {
          name: "打包上传",
          value: "multiple",
        },
      ],
      addVersionRules: {
        platform: [
          {
            required: true,
            message: "选择平台",
            trigger: "change",
          },
        ],
      },
      progress: {
        isShow: false,
        percent: 0,
      },
    };
  },
  computed: {},
  watch: {
    "addVersionData.uploadMethod": {
      deep: true,
      handler: function() {
        this.fileData = {
          csvFile: "",
          csvBtn: "选择csv文件",
          appFile: "",
          appBtn: "选择上传文件",
          zipFile: "",
          zipBtn: "选择zip文件",
        };
        this.$refs.csvFile.value = "";
        this.$refs.appFile.value = "";
        this.$refs.zipFile.value = "";
      },
    },
  },
  methods: {
    /**
     * @description: 初始化
     * @param {*}
     * @return {*}
     */

    init() {
      this.getAllPlat();
    },
    /**
     * @description: 上传文件
     * @param {*}
     * @return {*}
     */

    uploadFile(file, filename, e) {
      // let _this = this;
      let files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      this.fileData[file] = files[0];
      this.fileData[filename] = files[0].name;
    },
    /**
     * @description: 获取所有平台
     * @param {*}
     * @return {*}
     */

    getAllPlat() {
      this.$magusCloudApi.apiConfig.get(appManageApi.getAllPlat).then((res) => {
        this.platList = res;
      });
    },
    /**
     * @description: 创建版本
     * @param {*}
     * @return {*}
     */

    createAppVersion() {
      const _this = this;
      let formData = new FormData();
      this.$refs.addVersionData.validate((valid) => {
        if (valid) {
          _this.loading = true;
          let files = [];
          if (_this.fileData.csvFile) {
            files.push(_this.fileData.csvFile);
          }
          if (_this.fileData.appFile) {
            files.push(_this.fileData.appFile);
          }
          if (_this.fileData.zipFile) {
            files.push(_this.fileData.zipFile);
          }
          formData.append("appId", _this.$route.params.id);
          formData.append("platform", _this.addVersionData.platform);
          formData.append("uploadMethod", _this.addVersionData.uploadMethod);
          files.map((i) => {
            formData.append("files", i);
          });
          let config = {
            onUploadProgress: function(progress) {
              let percent = Math.round(
                (progress.loaded * 100) / progress.total
              );
              // console.log(percent);
              return percent;
            },
          };
          try {
            _this.$magusCloudApi.apiConfig
              .post(appManageApi.addAppVersion, formData, {}, config)
              .then(() => {
                _this.$message({
                  type: "success",
                  message: this.$t("global.text.success"),
                });
                _this.loading = false;
                _this.$router.back();
              })
              .catch(() => {
                _this.loading = false;
              });
          } catch (e) {
            console.log(e);
          }
        } else {
          return false;
        }
      });
    },
  },
  created() {
    this.init();
  },
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>
<style lang="scss" scoped>
.addVersion-box {
  box-shadow: none;
  .uploadfile {
    position: relative;
    cursor: pointer;
    width: 200px;
    input[type="file"] {
      cursor: pointer;
      font-size: 0;
    }
    .uploadfile-input {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      opacity: 0;
    }
  }
}
</style>
